<template>
    <view>
        <a-button type="dashed" style="margin-top: 5px; margin-bottom: 15px; width: 85%;" @click="openModal">
            <template #icon><plus-outlined /></template>新增井位置信息
        </a-button>
        <AntdConfirmModal title="新建井" ref="modalRef" width="600px" :keepSlot="false" @confirm="submitForm">
            <GdMap :longitude="form.longitude" :latitude="form.latitude" @setAddress="setAddress" @setLnglat="setLnglat">
            </GdMap>
            <a-form :model="form">
                <a-row style="margin-top:15px">
                    <a-col :span="24">
                        <a-form-item label="纬度">
                            <a-input-number v-model:value="form.latitude" controls-position="right" :step="0.0001"
                                style="width:100%" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="经度">
                            <a-input-number v-model:value="form.longitude" controls-position="right" :step="0.0001"
                                style="width:100%" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row gutter="15">
                    <a-col :span="12">
                        <a-form-item label="井ID" name="wellId" :rules="[{ required: true, message: '请输入井ID' }]">
                            <a-input v-model:value="form.wellId" style="width:100%" placeholder="请输入井号" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="井名称" name="wellName" :rules="[{ required: true, message: '请输入井名称' }]">
                            <a-input v-model:value="form.wellName" style="width:100%" placeholder="请输入井名" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="所属部门" name="department">
                            <a-tree-select v-model:value="form.deptId" style="width: 100%" :tree-data="departmentData"
                                allow-clear placeholder="选择所属部门"
                                :field-names="{ children: 'children', label: 'name', value: 'id', key:'id'}"
                                tree-node-filter-prop="name" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row gutter="15">
                    <a-col :span="8">
                        <a-form-item label-width="10px">
                            <a-input v-model:value="form.province" placeholder="省" style="width:100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label-width="10px">
                            <a-input v-model:value="form.city" placeholder="市" style="width:100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label-width="10px">
                            <a-input v-model:value="form.county" placeholder="区" style="width:100%" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import emitter from '@/utils/mitt'
import { PlusOutlined } from '@ant-design/icons-vue'
import { createOne } from '@/api/well/well.js'
import { queryTree } from '@/module/system/api/dept'
import GdMap from './map'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const emit = defineEmits(["close", "success"]);
const form = ref({
    operator: '',
    field: '',
    location: '',
    province: '',
    city: '',
    state: '',
    country: '',
    county: '',
    latitude: 44,
    longitude: 124,
    wellId: '',
    wellName: '',
    deptId: '',
    h2s: false,
    co2: false
})
const departmentData = ref([])
function setAddress(e) {
    form.value.country = e.country
    form.value.province = e.province
    form.value.city = e.city
    form.value.county = e.district
}
function setLnglat(e) {
    console.log(e)
    form.value.latitude = e.lat
    form.value.longitude = e.lng
}
// 打开新建
function openModal() {
    modalRef.value.openModal()
}
// 提交
function submitForm() {
    createOne(form.value).then((response) => {
        $.showToast({
            title: '新增成功',
            icon: 'success'
        })
        modalRef.value.closeModal()
        emitter.emit('flush-well-tree')
    });
}
// 获取部门信息
async function getDepart() {
    await queryTree().then(res => {
        console.log('部门信息', res);
        // departmentData.value = res.map(item => ({
        //     title: item.deptName,
        //     value: item.id,
        //     key: item.id,
        //     children: mapChildren(item.children)
        // }));
        departmentData.value = res
    })
}
// 递归处理子部门
// function mapChildren(children) {
//     if (!children || children.length === 0) {
//         return [];
//     }
//     return children.map(child => ({
//         title: child.deptName,
//         value: child.id,
//         key: child.id,
//         children: mapChildren(child.children)
//     }));
// }
getDepart()
</script>